{extend name="platform/base" /}
{block name="resources"}
<link rel="stylesheet" type="text/css" href="ADMIN_CSS/order.css">
<style>
body .modal.fade {
	transition: none;
	-webkit-transition: none;
}

/* 订单信息选中字体变色 */
.nav-tabs>.active>a,.nav-tabs>.active>a:hover,.nav-tabs>.active>a:focus
	{
	color: white;
}
.product-img {
    float: left;
    margin-right: 10px;
}
 .product-infor {
 	    margin-top: 8px;
    overflow: hidden;
}
.product-infor .specification {
    margin-bottom: 5px;
    color: #999;
    text-align: left;
    font-size: 12px;
}
.mod-table{margin-top:15px;-webkit-box-shadow: 0 0 1px 0 rgba(0,0,0,0.2);padding:15px;}
.step-region{margin-bottom: 15px;border: 1px solid #e5e5e5;}
.ui-step {margin:0;padding: 14px 0 8px 0;zoom: 1;}
.ui-step li {float: left;position: relative;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;text-align: center;}
.ui-step-4 li {width: 24.9999%;}
.ui-step:after {content: "";display: table;clear: both;}
.clearfix:after, .clearfix:before {display: table;line-height: 0;content: "";}
.clearfix:after, .clearfix:after {display: table;line-height: 0;content: "";}
.info-region {
    width: 320px;
    padding: 15px 15px 100px 15px;
    border-right: 1px solid #e5e5e5;
	float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.state-region {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 20px 20px 140px 20px;
    margin-left: -1px;
    border-left: 1px solid #e5e5e5;
	float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.ui-step li.ui-step-done::before, .ui-step li.ui-step-done::after, .ui-step li.ui-step-done .ui-step-number {
    background: #80CCFF;
}

.ui-step li.ui-step-done .ui-step-number::after {
    position: absolute;
    left: 0px;
    width: 17px;
    height: 20px;
    line-height: 20px;
    content: "√";
    color: rgb(255, 255, 255);
    font-family: serif;
}
.ui-step .ui-step-number {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 10px 0;
    line-height: 22px;
    background: #999;
    color: #fff;
    border-radius: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 2;
}
.ui-step li::before, .ui-step li::after {
    position: absolute;
    left: 0;
    top: 38px;
    display: block;
    content: '';
    width: 50%;
    height: 4px;
    background: #999;
    z-index: 1;
}
.ui-step li::after {
    left: 50%;
}
.ui-step li:first-child::before {
    width: 0;
}
.ui-step li:last-child::after {
    width: 0;
}
.ui-step li.ui-step-done .ui-step-title {
    color: #80CCFF;
}
.ui-step .ui-step-meta {
    color: #ccc;
}
.ui-step li.ui-step-done .ui-step-number {
    color: transparent;
}
.info-region .info-div {
    font-size: 14px;
    font-weight: bold;
}
.info-region .secured-title {
    float: right;
    font-size: 12px;
    font-weight: normal;
    color: #f60;
}
.info-table {
    margin-top: 10px;
}
.info-table th, .info-table td {
	font-size:12px;
    color: #999;
    padding: 0 0 10px 0;
    vertical-align: top;
}
.info-table th {
	font-weight: normal;
    text-align: right;
    color: #999;
    width: 66px;
}
.dashed-line {
    border-top: 1px dashed #e5e5e5;
}
.state-region .state-title .icon {
    position: absolute;
    left: -40px;
    width: 28px;
    height: 28px;
    border: 2px solid #07d;
    border-radius: 28px;
    line-height: 24px;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: serif;
}
.state-region .state-title {
    position: relative;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}
.state-region .state-title .icon.info {
    color: #07d;
    border-color: #07d;
}
.state-region .state-desc {
    margin-bottom: 30px;
    color: #666;
}

.zent-btn {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    border-radius: 2px;
    font-size: 12px;
    color: #333;
    background: #fff;
    border: 1px solid #bbb;
    text-align: center;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
}
.zent-btn-primary {
    color: #fff;
    background: #3283fa;
    border-color: #3283fa;
}
.ui-table {
    width: 100%;
    font-size: 12px;
    text-align: left;
    margin-bottom: 0;
    border: 1px solid #e5e5e5;
}
.goods-table thead th {
    background-color: #f2f2f2;
    color: #999;
}
.ui-table .cell-30 {
    width: 30%;
}
.ui-table th, .ui-table td {
    padding: 10px;
    border-bottom: 1px solid #e5e5e5;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.order-detail-goods-table {
    border-left: 0 none;
    border-right: 0 none;
}
.state-remind {
    padding: 20px 0 0 40px;
}
.state-remind .tixing {
    color: #FF6600;
    font-size: 12px;
    margin-bottom: 10px;
}
.state-remind ul {
    padding-left: 4px;
}
.state-remind li {
    color: #999;
}
.goods-table tfoot .c-red {
    color: #f44;
}
</style>
{/block}
{block name="main"}
<div class="mod-table">
{if condition="$order['order_status'] lt 5 && $order['order_status'] gt 0"}
<div class="step-region">
	<ul class="ui-step ui-step-4">
		<li class="ui-step-done"><div class="ui-step-title">买家下单</div><div class="ui-step-number">1</div><div class="ui-step-meta">2016-08-17 10:40:49</div></li>
		<li class="{if condition='$order["order_status"] gt 0'}ui-step-done{/if}"><div class="ui-step-title">买家付款</div><div class="ui-step-number">2</div><div class="ui-step-meta">2016-08-17 10:41:02</div></li>
		<li class="{if condition='$order["order_status"] gt 1'}ui-step-done{/if}"><div class="ui-step-title">商家发货</div><div class="ui-step-number">3</div><div class="ui-step-meta"></div></li>
		<li class="{if condition='$order["order_status"] eq 4'}ui-step-done{/if}"><div class="ui-step-title">交易完成</div><div class="ui-step-number">4</div><div class="ui-step-meta"></div></li>
	</ul>
</div>
{/if}
<div class="step-region clearfix">
	<div class="info-region">
		<div class="info-div">订单信息<span class="secured-title">担保交易</span></div>
		<table class="info-table">
		<tbody>
			<tr><th>订单编号：</th><td>{$order['out_trade_no']}</td></tr>
			<tr style="display: table-row;"><th>订单类型：</th><td>普通订单</td></tr>
			<tr><th>付款方式：</th><td>{$order['payment_type']}</td></tr>
			<tr><th>买家：</th><td><span>{$order['user_name']}</span></td></tr>
		</tbody>
		</table>
		<div class="dashed-line"></div>
		<table class="info-table">
			<tbody>
				<tr><th>配送方式：</th><td>{$order['shipping_type']}</td></tr>
				<tr><th>收货信息：</th>
					<td><p>{$order['address']}  {$order['receiver_address']}, {$order['receiver_name']}, {$order['receiver_mobile']}</p></td>
				</tr>
				<tr><th>买家留言：</th><td>{$order['buyer_message']}</td></tr>
			</tbody>
		</table>
	</div>
	<div class="state-region">
		<div style="padding: 0px 0px 30px 40px;">
			<div class="state-title"><span class="icon info">!</span>订单状态：{$order['status_name']}</div>
			<!-- <div class="state-desc">react-text: 96买家已付款至有赞待结算账户，请尽快发货，否则买家有权申请退款</div> -->
			<div class="state-action">
			{volist name="order['operation']" id="v" empty=""}
				<button class="zent-btn zent-btn-primary test-send-goods" onclick="operation('{$v['no']}',{$order['order_id']})">{$v['name']}</button>
			{/volist}
			</div>
		</div>
		<div class="state-remind-region">
			<div class="dashed-line"></div>
			<div class="state-remind"><div class="tixing">牛酷提醒：</div>
				<ul><li>如果无法发货，请及时与买家联系并说明情况后进行退款；</li>
				<li>买家申请退款后，须征得买家同意后再发货，否则买家有权拒收货物；</li>
				<li>买家付款后超过7天仍未发货，将有权申请有赞客服介入发起退款维权；</li></ul>
			</div>
		</div>
	</div>
</div>
<table class="ui-table ui-table-simple goods-table order-detail-goods-table">
	<thead>
		<tr>
			<th></th>
			<th class="cell-30">商品</th>
			<th>价格(元)</th>
			<th>数量</th>
			<th>调整金额(元)</th>
			<th class="cell-13">小计(元)</th>
			<th>状态</th>
		</tr>
	</thead>
	<tbody>
	{volist name="order['order_goods']" id="vo" empty="暂时没有数据" }
		<tr class="test-item">
			<td class="td-goods-image" rowspan="1">
				<div class="ui-centered-image" src="{$vo['picture_info']['pic_cover_micro']}" width="48px" height="48px" style="width: 48px; height: 48px;"><img src="{:__IMG($vo['picture_info']['pic_cover_micro'])}" style="max-width: 48px; max-height: 48px;"></div></td>
			<td><a href="" target="_blank">{$vo['goods_name']}</a><p class="c-gray">{$vo['sku_name']}</p></td>
			<td>{$vo['price']}</td>
			<td>{$vo['num']}</td>
			<td>{$vo['adjust_money']}</td>
			<td><p>{$vo['goods_money']}</p></td>
			<td>
				<p>{$vo['shipping_status_name']}</p>
				{if condition="$vo['refund_status'] neq 0"}
					<p><a href="{:__URL('PLATFORM_MAIN/Order/orderRefundDetail?itemid='.$vo['order_goods_id'])}">{$vo['status_name']}</a></p>
				{/if}
			</td>
		</tr>
		<tr><td colspan="7"></td></tr>
	{/volist}
	</tbody>
	<tfoot>
		<tr>
			<td colspan="7" class="text-right"><span>商品总金额：￥{$order['goods_money']}，  积分兑换金额：-￥{$order['point_money']}， 代金券：-￥{$order['coupon_money']}， 优惠金额：-￥{$order['promotion_money']}， 实际需支付：</span><span class="c-red">￥</span><span class="real-pay c-red">{$order['pay_money']}</span><span>（含运费 ￥{$order['shipping_money']}）</span></td>
		</tr>
	</tfoot>
</table>
</div>
{include file="platform/openDialog" /}
{include file="platform/Order/orderAction"/}
{/block}